<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <link rel="stylesheet" href="../static/bootstrap-fileinput/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../static/bootstrap-fileinput/css/fileinput.min.css" />
    <script src="../static/bootstrap-fileinput/js/jquery-3.3.1.min.js"></script>
    <script src="../static/bootstrap-fileinput/js/bootstrap.min.js"></script>
    <script src="../static/bootstrap-fileinput/js/fileinput.min.js"></script>
    <script src="../static/bootstrap-fileinput/js/zh.js"></script>
    <script src="../static/bootstrap-fileinput/js/layer.js"></script>

</head>
<body>
    <div style="width: 900px;height: 500px;margin: auto auto;">
        <div class="container-fluid">
            <form id="form" th:action="@{/admin/uploadTest}" method="post" enctype="multipart/form-data">
                <div class="row form-group">
                    <label class="col-md-4">图片上传:</label>
                    <div class="col-sm-12">
                        <input id="input-id" name="file" multiple="multiple" th:multiple="multiple" type="file" data-show-caption="true"/>
                    </div>
                </div>
            </form>
        </div>
    </div>


    <script>
        $(function () {
            initFileInput("input-id");
        });
        function initFileInput(ctrlName) {
            var control = $('#' + ctrlName);
            control.fileinput({
                language: 'zh', //设置语言
                uploadUrl: "/admin/uploadTest", //上传的地址
                allowedFileExtensions: ['jpg', 'gif', 'png'],//接收的文件后缀
                //uploadExtraData:{"id": 1, "fileName":'123.mp3'},
                uploadAsync: false, //默认异步上传
                showUpload: true, //是否显示上传按钮
                showRemove : true, //显示移除按钮
                showPreview : true, //是否显示预览
                showCaption: false,//是否显示标题
                browseClass: "btn btn-primary", //按钮样式
                maxFileCount: 3, //允许同时上传的最大文件个数
                enctype: 'multipart/form-data',
                validateInitialCount:true,
                msgFilesTooMany: "选择上传的文件数量({n}) 超过允许的最大数值{m}！",
                layoutTemplates :{
                    // actionDelete:'', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    // actionZoom:'',   //去除上传预览缩略图详情的图标
                    // actionDownload:'' //去除上传预览缩略图中的下载图标
                },
                uploadExtraData:function () {   //向后台传递的附带参数
                    var data = {
                        id:"10000",
                        msg:"这里可以添加参数"
                    }
                    return data;
                }
                // initialPreviewAsData: true,
                // initialPreview:['http://placekitten.com/g/200/300']
            }).on('filebatchuploadsuccess', function(event, data, previewId, index) {     //上传中
                //console.log(data);
                console.log('文件正在上传');
            }).on("filebatchuploadsuccess", function (event, data, previewId, index) {    //一个文件上传成功
                var form = data.form, files = data.files, extra = data.extra,
                    response = data.response, reader = data.reader;
                console.log(response);//打印出返回的json
                console.log(response.status);//打印出状态
            }).on('filebatchuploaderror', function(event, data, msg) {  //一个文件上传失败
                console.log('文件上传失败！'+data.status);
            })
        }

    </script>

</body>
</html>